<template>
	<div style="padding:0px;">
		<el-card class="box-card">
		  <div  class="text item" >
			  <el-form :model="dialogForm" ref="dialogForm" :label-width="formLabelWidth" :rules="rules">
			    <el-form-item label="汽车品牌名称"  prop="name">
			      <el-input v-model="dialogForm.name"  auto-complete="off" :maxlength="20" :disabled="!dialogSendData.isAdd" @blur="capital({first:true,force:false,name:'name'})"></el-input><!-- v-capital="{first:true,force:false,name:'name'}" -->
			    </el-form-item>
			    <el-form-item label="备注" >
			      <el-input v-model="dialogForm.remark" type="textarea" :rows=3 auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			    <el-form-item label="首字母" prop="letter">
			      <el-input v-model="dialogForm.letter" :maxlength="1" auto-complete="off" :disabled="!dialogSendData.isAdd" @blur="capital({first:true,name:'letter'})"></el-input><!-- v-capital="{first:'true',name:'letter'}" -->
			    </el-form-item>
			    <el-form-item label="汽车图标" class="is-required" >
			        <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
			    </el-form-item>			    
			  </el-form>
			</div>
		</el-card>
		<div  style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js'
    import qiniu from '@/views/qiniu/upload'
    import {english} from '@/utils/rules.js'
	export default{
		created(){		
			if(this.dialogSendData.id!==""){
	      		this.selectData(); 
	      	}
        },
        directives : {
            "capital" :  (el,binding)=> {
            	//var _this=this;
                el.children[0].onblur=function(){
                	var str = el.children[0].value;
                	if(binding.value.force){
                		str=str.toLowerCase();
                	};
					str = str.replace(/\b\w+\b/g, function(word){
						if(binding.value&&binding.value.first){

							
							return word.substring(0,1).toUpperCase()+word.substring(1);
						}else{
                            return word.toUpperCase()
						}
                    })
                    //_this.dialogForm[binding.name]=str
                    el.children[0].value=str;
                }
                
            }
        },
        components:{qiniu},
		props:['dialogSendData','tableData'],
		data(){
			return{
				
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		         dialogForm:{
		          imagUrl:[],   //七牛图片地址
		          remark:"",
		          letter:"",
		          name:""		         
		        },
		        //验证规则
		        rules: {
		            name: [
		              { required: true, message: '汽车品牌不能为空', trigger: 'change' }
		            ],
		            letter: [
		              { required: true, message: '首字母不能为空', trigger: 'change',},{validator: english,trigger:"change" }
		            ],	          
		        },
		        //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]    //图片上传的列表  只含有url地址
		        },
		        packJson:{
					maxLength:1,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				}
			}
		},methods:{
			capital(binding){
				
				var str = this.dialogForm[binding.name];
            	if(binding.force){
            		str=str.toLowerCase();
            	};
				str = str.replace(/\b\w+\b/g, function(word){
					if(binding&&binding.first){

						
						return word.substring(0,1).toUpperCase()+word.substring(1);
					}else{
                        return word.toUpperCase()
					}
                })
                this.dialogForm[binding.name]=str
                
			},
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
				
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
		          	    this.addData();
		          	}else{
		          		this.editData();
		          	}		          	
		          } else {
		             this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
		                return false;
		          	})
		          }
		        });
			},
		    addData(){
		    	if(this.qiniuImage.image_uri.length<=0){
		    		this.$message.warning("请上传品牌图标");
		            return false;
		    	}
		    	this.dialogForm.icon=this.qiniuImage.image_uri.join(",")
		        agentHttp.postJson('adminApi/admin/car_brand/add',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"添加成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    editData(){
		    	if(this.qiniuImage.image_uri.length<=0){
		    		this.$message.warning("请上传品牌图标");
		            return false;
		    	}
		    	this.dialogForm.icon=this.qiniuImage.image_uri.join(",")
		        agentHttp.putJson('adminApi/admin/car_brand/update',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"修改成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    selectData(){
		        agentHttp.get('adminApi/admin/car_brand/view/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){  
		            	this.dialogForm=data.data;
		            	this.qiniuImage.image_uri=data.data.icon.split(',').notempty()
		            } 
		        }) 
		    },
		}
	}
</script>
